<template>
	<view>
		<image mode="widthFix" class="image posiab" src="/static/xaing.png"></image>
		<view class="posiab zindex5" :style="{paddingTop:shh+'px'}">
			<view @click="back"  class="flex-ju-c mt30 wh70-70 ra100 mt30 ml30 ">
				<view  class="" >
					<image mode="widthFix" class="image width32   " src="/static/back.png"></image>
				</view>
			</view>
		</view>
		<view class="colorfff posire  pt19vh">
			<view class="flex-ju-c">
				<image v-if="info.is_box==1" class="image wh465-465 ra20" src="/static/box.png"></image>
				<image v-else class="image wh465-465 ra20" :src="info.thumb"></image>
			</view>
			<view class="flex-ju-c size31 mt150">{{info.title}}</view>
			<view class="flex-ju-c mt30">
			<view 
				class="flex-a-i size24 borderccc ra10 hidden mr20">
				<view class="ibgtoCAF881-A0E99A color000 pt5 pb5 pl10 pr10">限量</view>
				<view class="pr10 pl10 size28">{{info.sell_num}}份</view>
			</view>
			<view
				class="flex-a-i size24 borderccc ra10 hidden ml20">
				<view class="ibgtoCAF881-A0E99A color000 pt5 pb5 pl10 pr10">流通</view>
				<view class="pr10 pl10 size28">{{info.release_num}}份</view>
			</view>
			</view>
			<view class="bgfff mt50 pg30 color000" style="border-top-right-radius: 40rpx;border-top-left-radius: 40rpx;">
				<!-- <view class="flex-a-i">
					<image src="/static/aaa.png" class="wh83-83 ra83"></image>
					<view class="ml20">
						<view class="size26">创作者的名字</view>
						<view class="color999 size25">500粉丝</view>
					</view>
				</view> -->
				<view v-if="info.is_box==1" class="bgF5F6F7 size26 ra20 pg30-20 mt20">
					<view class="size30 bold">盲盒信息</view>
					<scroll-view scroll-x class="mt30">
						<view class="flex center">
							<view class="mr20" v-for="(item,u) in info.box_info" :key="u">
								<image :src="item.thumb" class="wh185-185 ra15"></image>
								<view class="one">{{item.title}}</view>
								<view class="color999">{{item.odds}}%</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-else :class="theme?'bg292929 colorfff':'bgF5F6F7'" class="borderE1E1E1 size26 ra20 pg30-20 mt20">
					<view class="size30 bold">链上信息</view>
					<view class="flex-ju-b mt20 ">
						<view class="color999">所在产链</view>
						<view  class="color35B1FF">
						{{info.link_name}}</view>
					</view>
					<view class="flex-ju-b mt20">
						<view  class="color999">合约地址</view>
						<view :class="theme?'color999':'color333'" class="">
						{{info.link_address.substring(0,3)}}****{{info.link_address.substring(info.link_address.length-3,999)}}</view>
					</view>
					<view class="flex-ju-b mt20">
						<view  class="color999">支付钱包</view>
						<view :class="theme?'color999':'color333'">{{info.pay_type}}</view>
					</view>
					<view class="flex-ju-b mt20">
						<view  class="color999">发行时间</view>
						<view :class="theme?'color999':'color333'">{{info.created_at}}</view>
					</view>
				</view>
				
				<view :class="theme?'bg292929 colorfff':'bgF5F6F7'" class="borderE1E1E1 size26 ra20 pg30-20 mt20 mb150">
					<view class="size30 bold mb20">藏品详情</view>
					<image mode="widthFix" class="image" v-for="(item,index) in info.images" :src="item"></image>
					<view class="size30 bold mb20 mt20">购买须知</view>
					<view class="color999">
						<view class="mb30">
							数字藏品交易仅限于18周岁(不含)以上、60周岁(含)以下，并已完成实名认证的中国大陆用户购买。由于不同属性的数字艺术有不同的二次交易规则，请您仔细阅读并同意相关规则后再进行相应操作，以避免不必要的损失。
						</view>
						请注意，一旦数字藏品完成出售，不支持退货在购买之前，请仔细考虑您的购买决策。根据我国相关的法律要求，特定条件下的数字藏品的二次交易不支持任何形式的变相炒作。我们坚决反对数字藏品炒作、场外交易、欺诈，以及其他非法侵权行为。请您甄别上述涉嫌网络欺诈的行为并了解相关风险。
					</view>
				</view>
				
				<view class="posifi width92vw bottom0 bgfff zindex10 height150 hidden flex-a-i ra20"
					style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
				
					<view class="con">
						<view class="flex-ju-b height98 mt2  width1000 ra100 ">
							<view v-if="info.is_hidden==1&&info.status==1" class="flex-ju-c border000 height98 flex1 ra20 mr30" :class="theme?'bg292929':''">
								<view @click="$refs.kaihe.open()" class=" size29 flex1 flex-ju-c ra100 bold">
									开盒
								</view> 
							</view>
							
							<view v-if="info.meta_chain==1&&info.status==1" class="flex-a-i border000 bg000 colorfff flex1 ra20 height98 " :class="theme?'bg292929':'bgfff'">
								<view @click="taphes" class="srgb height100 size29 flex1 flex-ju-c ra100 bold">
									寄售
								</view>
							</view>
							<view v-if="info.meta_chain==1&&info.status==5" class="flex-a-i border000 bg000 colorfff flex1 ra20 height98 " :class="theme?'bg292929':'bgfff'">
								<view @click="clenanshou" class="srgb height100 size29 flex1 flex-ju-c ra100 bold">
									取消寄售
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup type="center" ref="kaihe">
			<view class="colorfff width100vw">
					<!-- <view @click="wkaihe" class="wh200-200  posiab bottom90 zindex5"></view> -->
					<image @click="$refs.kaihe.close()" mode="widthFix" class="image" src="/static/kaihe.png"></image>
					<view class="flex-ju-c">
						<view class="posiab flex-ju-c flex-col mt-250">
							<view @click="wkaihe" style="background-image:linear-gradient(to right,#CAF881,#A0E99A) ;" class="color000 size35 wh500-100 flex-ju-c ra20">点击开盲盒</view>
							<image @click="$refs.kaihe.close()" mode="widthFix" class="image width60 mt50" src="/static/kaiheclose.png"></image>
						</view>
					</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="pilangjishou" :background-color="theme?'#141414':'#fff'" border-radius="20px 20px 0px 0px"  type="bottom">
			<view class="pilaing " style="height: auto;">
				<view class="flex-ju-b pt40">
					<view class="width28 ml30"></view>
					<view class="size29 bold  flex-ju-c">寄售</view>
					<image mode="widthFix" @click="$refs.pilangjishou.close()" class="width28 mr30" src="/static/close.png"></image>
				</view>
				<view class="con mt40">
					<view class="bgF6F7F8 pt40 pb40 ra20 mb30">
						<view class="con">
							<view class="flex-a-i">
								<image :src="info.thumb" class="wh152-152 ra15"></image>
								<view class="ml20">
									<view style="max-width: 250rpx;" class="one size29 bold ">{{info.title}}</view>
									<view class="flex-a-i size25 mt30 ">
										<view>
											<view class="color999">藏品编号</view>
											<view>#{{hao(info.nftId)}}<template v-if="piliang">...</template>
											</view>
										</view>
										<view class="ml50">
											<view class="color999">藏品类型</view>
											<view>藏品</view>
										</view>
										<view class="ml50">
											<view class="color999">获得方式</view>
											<view>{{info.source_value}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<view class="flex-ju-b con size26 mt30">
							<view>寄售价格</view>
							<view class="flex-a-i width380  ra30 " style="text-align: right;">
								<input placeholder="请输入寄售价格" v-model="money_price"
									class="width180 ml10 mr10 flex1 size22 color000" :class="theme?' colorfff':'border-rfff'" />
								元
							</view>
						</view>
						<view class="color999 size24 ml30 mt30">*{{`寄售价不能大于${info.examine_max_ratio}元或小于${info.examine_min_ratio}元`}}</view>
					</view>
					<view class="color999 size24  center" style="margin: auto;">
						<view>交易成功后，将扣除{{info.edition_tax_ratio}}%的版权费以及{{info.brokerage_ratio}}%的平台服务费</view>
						<!-- <view>预计此次转卖实际可得 ￥999.00</view> -->
					</view>
					
					<view class="ra20 flex-ju-b pg30 bgfff  mt80"  style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
						<view @click="tapmima"  class="bold  bg000 colorfff ra20 flex-ju-c height100 width1000  size29  ">
							发布寄售信息
						</view>
					</view>
					
				</view>
			</view>
		</uni-popup>
		
		<uni-popup type="center" background-color="#fff" border-radius="20px 20px" ref="mima">
			<view class="pt40 pb40 posire">
				<view class="flex-ju-c">
					<image mode="widthFix" src="/static/tancc.png" class="width127 posiab top-60"></image>
				</view>
				<view class="flex-ju-c size29  mb50 mt80">
					<view>请输入交易密码</view>
				</view>
				<xsk-code-input width="84" height="84" @confirm="inputConfirm"></xsk-code-input>
				
				<view @click="navto('/pages/user/password?type=level2password')" class="flex-ju-c color999 size24 mt40" style="text-decoration: underline">
					未设置交易密码或忘记密码？
				</view>
				<view class="flex-ju-c flex-col mt50 ">
					<view @click="tapding" class="bold srgb bg000 colorfff wh530-100 ra20 flex-ju-c">确认</view>
					<view @click="$refs.mima.close()" class="bold srgb wh694-100 ra100 flex-ju-c">取消</view>
				</view>
				
			</view>
		</uni-popup>
		<uni-popup type="center" ref="boxkaihe">
			<view>
				<view class="flex-ju-c colorfff mb30">获得以下藏品</view>
				<view class="bgfff ra20 wh611-970 size26">
					<image class="wh550-550 ra20 mt30" :src="kinfo.thumb"></image>
					<view class="con">
						<view class="flex-ju-b mt30">
							<view class="color999">藏品名称</view>
							<view>{{kinfo.title}}</view>
						</view>
						<view class="flex-ju-b mt30">
							<view class="color999">藏品数量</view>
							<view>2</view>
						</view>
						<view class="flex-ju-b mt30">
							<view class="color999">开盒时间</view>
							<view>{{thistime()}}</view>
						</view>
						<view @click="ping" class="wh550-100 bg000 colorfff flex-ju-c ra20 mt50">
							确定
						</view>
					</view>
					
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				level2password:"",
				isvideo:false,
				theme: uni.getStorageSync('theme'),
				uuid: "",
				metaAddress:"",
				info: {},
				kinfo:{}
			}
		},
		onLoad(e) {
			this.uuid = e.uuid
			this.getInfo()
		},
		mounted() {
			  // this.$refs.boxkaihe.open()
		},
		methods: {
			clenanshou(){
				uni.showModal({
					content: "确定要取消吗？",
					success: (res) => {
						if (res.confirm) {
							this.http('resale/close/'+this.info.resale_uuid,{},'post').then(res=>{
								uni.showToast({
									title: "取消成功",
									icon: "none"
								})
								setTimeout(()=>{
									this.getInfo()
								},700)
							})
						}
					}
				})
				
			},
			ping(){
				uni.reLaunch({
					url:"/pages/user/index"
				})
			},
			tapmima(){
				if (!this.money_price) {
					uni.showToast({
						title: "请输入价格",
						icon: "none"
					})
					return
				}
				this.$refs.mima.open()
			},
			tapding() {
				if (this.level2password.length != 6) {
					uni.showToast({
						title:"二级密码格式不正确",
						icon:"none"
					})
					return
				}
			
				let package_sku_id = ''
				var arr = []
				
				package_sku_id = this.info.id
			
				uni.showModal({
					content: "确定要" + this.money_price +'元寄售吗',
					success: (res) => {
						if (res.confirm) {
							this.http('packages/resales', {
								package_sku_id,
								money_price: this.money_price,
								level2password: this.level2password,
								metaAddress:this.metaAddress
							}, 'post').then(res => {
								uni.reLaunch({
									url: 'suu?info=' + JSON.stringify(this.info) + '&price=' +
										this.money_price + '&type=1'
								})
							})
						}
					}
				})
			
			},
			inputConfirm(e){
				this.level2password = e
			},
			taphes(){
				this.$refs.pilangjishou.open()
			},
			wkaihe(){
				this.$refs.kaihe.close()
				this.isvideo = true
				
				this.http('packages/open/' + this.uuid).then(res => {
					this.kinfo = res.data
					this.getInfo()
					this.$refs.boxkaihe.open()
				})
				
				// setTimeout(()=>{
				// 	uni.reLaunch({
				// 		url:"suukaihe?uuid="+this.uuid
				// 	})
				// },2700)
			},
			getInfo() {
				this.http('packages/info/' + this.uuid).then(res => {
					if(!res.data.info.link_address){
						res.data.info.link_address = '0x0EAd1e369fB35B8522F9778fd150483d54Ab4cC7c12345678901726815273470'
					}
					this.info = res.data.info
				})
			}
		}
	}
</script>
<style>

</style>
